<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
		<title>直播</title>
	</head>
	
	<body>
		<div id="id_test_video" ></div>

		 <div class="but" >
			<div  class="meiyanbut" >
				<div class="barrage" >
					<input type="text" class="barrage-input" placeholder="说点什么..." disabled="disabled" />
				</div>
				<div class="commodyti-box" onclick="openMark()">
					<img class="but-img" src="./broadcast-commodyti.png"></img>
				</div>
			</div>
		 </div>

		<!-- 这是商品弹窗 -->
		<div class="shop-list-box" style="display: none;">
			<span class="mark-title">直播商品 <span class="close">关闭</span></span>
			<div class="scroll-Ys">
				
			</div>
		</div>
		 
		 <!-- 这是聊天室 -->
		 <div class="chat" >
			
				
	

		 </div>
		 <!-- 底部输入栏 -->
		 <div class="input-box" style="display: none;">
			 <div  class="meiyanbut">
				<div class="box" :style="{width: (+width)*0.745 + 'px'}">
					<input type="text" class="box-input"  placeholder="说点什么..."   />
				</div>
				<div class="send" >
					<span class="send-btn">发送</span>
				</div>
			 </div>
		</div>
	</body>
	<script src="./TcPlayer-2.3.2.js" charset="utf-8"></script>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		var addressUrl = 'http://backend.dongfangqianmen.com';
		(function ($) {
			$.getUrlParam = function (name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]); return null;
			}
		})(jQuery);
		
		var userid = $.getUrlParam('userid');
		var live_id = $.getUrlParam('live_id');

		var player = new TcPlayer('id_test_video', {
			"m3u8": "http://pull.sigequanwangluokeji.com/live/"+live_id+".m3u8",
			"flv": "http://pull.sigequanwangluokeji.com/live/"+live_id+".flv", 
			"autoplay" : false,      
			'live' : true,
			"x5_player" :  true,
			"x5_fullscreen" :  true,
			"h5_flv" :  true,
			"x5_orientation" :  1,
			"x5_type" :  'h5',
			'controls' : 'none',
			"width" :  '100%',
			"height" : $(document).height(),
			"listener" : function(msg){
				console.log(msg)
			}
		});
		window.onresize = function(){
		  $('#id_test_video').style.width = window.innerWidth + "px";
		  $('#id_test_video').style.height = window.innerHeight + "px";
		}
		setTimeout(function(){
			player.play()
			player.fullscreen(false)
		},2500)


		$('.close').click(function(){
			$('.shop-list-box').slideUp()
		})
		function openMark(){
			$('.shop-list-box').slideDown();
			$.ajax({ 
				url: addressUrl + "/merapi/merchants/v1/live/live-goods", 
				type:'post',
				data:{'merchant_id' : live_id }, 
				success: function(res){
					let html = '';
			        for(let i=0;i<res.data.length;i++){

						html += '<div class="shop-list-list"><div>\n' +
						'<img class="shop-list-img" src="'+res.data[i].picture+'"></img>\n' +
						'</div>\n' +
						'<div>\n' +
						'<span class="shop-list-title">'+res.data[i].name+'</span>\n' +
						'<span class="shop-list-price">'+res.data[i].price+'</span>\n' +
						'</div>\n' +
						'<div class="shop-list-but-box">\n';
						if(res.data[i].is_now_live == '1'){
							html += '<span  class="shop-list-but" >讲解中...</span>\n';
						}
						html += '<span onclick="navToList('+res.data[i].id+')" class="shop-list-but">购买</span>\n'+
						'</div></div>';
			        }
			        $('.scroll-Ys').html(html)
			    },
			});
		}
		 
		function navToList(id){
			window.parent.location.href = '../pages/product/product/?id='+id
		}
		setInterval(function(){
			chatLives();
		},2000)
		chatLives()
		function chatLives(){
			let data = Date.parse(new Date())/1000- 300;
			$.ajax({
				url: addressUrl + "/api/tiny-shop/v1/chat/chat-live/chat-live", 
				type:'post',
				data:{'live_id' : live_id ,time: data}, 
				success: function(res){
					let html = ''; 
					console.log(res)
					for(let i=0;i<res.data.length;i++){
						html += '<div><div class="chat-list scroll-Y"><span class="chat-username">'+res.data[i].member.realname+'：</span><span class="chat-usertext">'+res.data[i].content+'</span></div></div>'
					}
					$('.chat').html(html)
					$('.chat').scrollTop(1000);
				},
			});
			
		}
		
		
		$('.barrage').click(function(){
			$('.input-box').show()
			$('.box-input').focus()
		})
		
		$('.box-input').blur(function(){
			console.log($('.box-input').val())
			if($('.box-input').val()==''){
				$('.input-box').hide();
			}
			
		})
		
		$('.send-btn').click(function(){
			
			let sendData = {
				 from_id: userid,
				 live_id: live_id,
				 content: $('.box-input').val()
			}
			let data = Date.parse(new Date())/1000- 300;
			$.ajax({
				url: addressUrl + "/api/tiny-shop/v1/chat/chat-live/send", 
				type:'post',
				data:sendData, 
				success: function(r){
					if(r.code == 200){
						$('.box-input').val('');
						$('.input-box').hide();
						 chatLives();
					}else if(r.data.code == 422){
						alert('会话已过期，是否跳转登录页面？')
					}
				},
			});		

		})

	</script>
	
	<style >
		body{
			margin: 0 ;
			padding: 0 ;
		}
		#id_test_video{
			position:fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
		}
		
		.mark-text{
			padding-right: 75px;
			font-size: 20px;
			color: #333333;
		}
		.mark-texts{
			line-height: 20px;
			line-height: 10px;
			font-size: 14px;
			height: 50px;
			width: 300px;
			color: white;
			background-color: #D4237A;
		}
		.text{
			text-align: center;
			padding-top: 400px;
			padding-bottom: 50px;
		}
		
		.add-shop{
			font-size: 16px;
			color: #333333;
			position: absolute;
			top: 20px;
			left: 20px;
			z-index:10;
		}
		.shop-list-but-box{
			position: absolute;
			bottom: 20px;
			right: 10px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: row;
		}
		.shop-list-but{
			color: white;
			border-radius: 20px;
			font-size: 12px;
			background-color: rgba(255,65,0,1);
			padding: 6px 10px;
			margin-left: 10px;
		}
		.mark-title{
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: left;
			display: inline-block;
			margin-left: 10px;
			font-size: 16px;
			font-weight: 700;
			width: 95%;
		}
		.close{
			float: right;
			font-weight: 400;
			color: #676767;
			cursor: pointer;
		}
		.shop-list-img{
			margin-right: 10px;
			width: 80px;
			height: 80px;
		}
		.shop-list-title{
			font-size: 16px;
			color: #333333;
			margin-top: 10px;
			line-height: 40px;
		}
	
		.shop-list-price{
			font-size: 16px;
			color: #ff4100;
			line-height: 30px;
			display: block;
		}
		.shop-list-box{
			position: fixed;
			background-color: white;
			width: 100%;
			height: 340px;
			bottom: 0;
			z-index: 40;
			border-radius: 10px 10px 0 0;
		}
		.shop-list-list{
			position: relative;
			padding-top: 5px;
			padding-bottom: 5px;
			display: flex;
			align-items: flex-start;
			flex-direction: row;
			width: 96%;
			margin: 0 auto;
		}
		.scroll-Ys{
			height: 300px;
			width: 100%;
		}

		.but-img {
			width: 17px;
			height: 20px;
		}
		
		.meiyanbut {
			margin-left: 10px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 96%;
			flex-direction: row;
		}
		
		.but-text {
			padding-top: 3px;
			font-size: 13px;
			color: white;
		}
		
		.id {
			font-size: 14px;
			color: white;
		}
		
		.text-box {
			font-size: 12px;
			color: white;
		}
		
		.user-img {
			margin-right: 5px;
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		
		.mark-text {
			color: white;
			font-size: 20px;
		}
		
		.mark {
			position: fixed;
			top: 0px;
			background-color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		.but {
			background-color: rgba(66, 66, 66);
			width: 100%;
			position: fixed;
			bottom: 0px;
			display: flex;
			align-items: center;
			flex-direction: row;
			padding-bottom: 5px;
			padding-top: 5px;
			z-index: 10;
		}
		
		.tui {
			width: 200px;
			height: 200px;
		
		}
		
		.arrow-box {
			position: fixed;
			top: 60px;
			left: 20px;
			z-index: 10;
			border-radius: 20px;
			background-color: rgba(0, 0, 0, .4);
		}
		
		.arrow-boxs {
			padding: 10px 20px 10px 20px;
			display: flex;
			align-items: center;
			flex-direction: row;
			position: fixed;
			top: 60px;
			left: 140px;
			z-index: 10;
			border-radius: 30px;
			background-color: rgba(0, 0, 0, .4);
		}
		
		.jiesu {
			padding: 10px 20px 10px 20px;
			color: white;
			font-size: 16px;
		}
		
		.arrow {
			width: 15px;
			height: 15px;
		}
		.commodyti-box{
			width: 45px;
			height: 45px;
			background-color: rgba(255,255,255,0.2);
			border-radius: 45px;
			display: inline-flex;
			align-items: center;
			justify-content: center; 
			margin-left: 15px;
		}
		.barrage{
			width: 80vw;
			display: flex;
			align-items: flex-start;
			justify-content: center; 
		}
		.barrage-input{
			width: 90%;
			height: 40px;
			background-color: rgba(255,255,255,0.2);
			color: #FFFFFF;
			font-size: 14px;
			border-radius: 40px;
			padding-left: 15px;
			border: none;
		}
		.barrage-input:focus {
			outline: none;
		    border: none;
		}
		
		
		/* 弹幕 */
		.input-box{
			padding: 10px 1%;
			background-color: #f2f2f2;
			position: fixed;
			z-index: 30;
			bottom: 0px;
			width: 98%;
		}
		.send{
			
			border-radius: 30px;
			margin-left: 10px;
			width: 50px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#eb632c;
			
		}
		.send-btn{
			display: inline-flex;
			justify-content: center;
			align-items: center;
			line-height: 30px;
			font-size: 14px;
			color: #ffffff;
		}
	
	
		.box{
			height: 40px;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 85%;
		}
		.box-input{
			padding: 0px 5%;
			background-color: #ffffff;
			z-index: 30;
			bottom: 0px;
			width: 86%;
			border-radius: 40px;
			border: none;
			height: 40px;
		}
		.box-input:focus{
			outline: none;
			border: none;
		}
		.chat {
			position: fixed;
			z-index: 30;
			bottom: 90px;
			height: 200px;
			width: 250px;
			overflow: auto;
		}
	
		.chat-username{
			color: white;
			font-size:15px;
			font-family:PingFang SC;
			/* font-weight:400; */
			color:rgba(255,80,122,1);
			overflow:hidden;
			white-space: nowrap;
		}
		.chat-usertext{
			font-size:15px;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
		.chat-list{
			margin-left: 10px;
			margin-top: 5px;
			background-color: rgba(255,255,255,.2);
			line-height: 26px;
			border-radius: 30px;
			min-width: 30px;
			max-width: 250px;
			padding: 2px 8px;
			display: inline-block;
		}
		
		
	</style>
	
</html>